import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail/Detail'

export default class Msg extends Component {
  state={
    msgObj:[
      {id:1,title:'Msg000'},
      {id:2,title:'Msg111'},
      {id:3,title:'Msg222'},
    ]
  }
  render() {
    const {msgObj}=this.state
    return (
      <div>
        <ul>
          {
            msgObj.map(val=>{
              return(
                <li key={val.id}>
                  {/* 向路由组件传递params参数 */}
                  {/* <Link to={`/home/msg/datail/${val.id}/${val.title}`}>{val.title}</Link> */}
                  {/* 向路由传递search参数 */}
                  {/* <Link to={`/home/msg/datail?id=${val.id}&title=${val.title}`}>{val.title}</Link> */}
                  {/* 向路由传递state参数 replace替换历史记录栈中最新的一条数据，区别于push*/}
                  <Link replace to={{pathname:'/home/msg/datail',state:{id:val.id,title:val.title}}}>{val.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <div style={{height:'20px'}}></div>
        {/* 组件接收params参数 */}
        {/* <Route path='/home/msg/datail/:id/:title' component={Detail} /> */}
        {/* search,state传递参数无需定义 */}
        <Route path='/home/msg/datail' component={Detail} />

      </div>
    )
  }
}
